<template>
    <div class="home_div">
        <div class="map_title">
            <h3>JSAPI Vue2地图组件示例</h3>
        </div>
        <div id="container"></div>
    </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
    name:"Mapview",
    data(){
        return{
            map:null,
        } 
    },
    created(){

    },
    mounted(){
        this.initAMap();
    },
    methods:{

        initAMap(){
            AMapLoader.load({
                key:'7b154a5393d30c6211f47bb10e57b3b4',  //设置您的key
                version:"2.0",
                plugins:['AMap.ToolBar','AMap.Driving',"AMap.LabelMarker","AMap.LabelMarker"],
                AMapUI:{
                    version:"1.1",
                    plugins:[],

                },
                Loca:{
                    version:"2.0"
                },
            }).then((AMap)=>{
                this.map = new AMap.Map("container",{
                    viewMode:"3D",
                    zoom:5,
                    zooms:[2,22],
                    center:[105.602725,37.076636],
                });

                // 设置一个图标对象
				var icon = {
					type: 'image',
                    image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
					anchor: 'bottom-center',
					size: [24, 31],
					clipSize: [48, 62]
				};
				var textStyle = {
					fontSize: 12,
					fontWeight: 'normal',
					fillColor: '#262626',
					backgroundColor: '#FFFFFF',
					fold: true,
					padding: [10, 10, 10, 10],
				};
				var markerText = {
					offset: [0, 0],
					direction: 'right',
				};
				var pointsData = [];
                let pointItem = {
                    name: '标记点',
                    position: ["111.69552", "40.800641"],
                    icon,
                    text: {
                        content: '标记点',
                        direction: markerText.direction,
                        offset: markerText.offset,
                        style: textStyle
                    },
                };
                pointsData.push(pointItem);
				//标注点
				var markers = [];
				//大量标注点
				var layer = new AMap.LabelsLayer({
					zooms: [2, 20],
					zIndex: 1000,
					allowCollision: false, //标注层内的标注是否避让用户的标注
					collision: false //标注层内的标注是否允许其它标注层对它避让
				});
				// 图层添加到地图
				this.map.add(layer);

				// 初始化 labelMarker
				for (var i = 0; i < pointsData.length; i++) {
					var curData = pointsData[i];
					var labelMarker = new AMap.LabelMarker(curData);
					markers.push(labelMarker);
				}
				// 将 marker 添加到图层
				layer.add(markers);
            }).catch(e=>{
                console.log(e);
            })
        },
    }


}
</script>
<style  scoped>
    .home_div{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        position: relative;
    }
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        position:absolute;
    }
    .map_title{
         position:absolute;
         z-index: 1;
         width: 100%;
         height: 50px;
         background-color: rgba(27, 25, 27, 0.884);

    }
    h3{
        position:absolute;
        left: 10px;
        z-index: 2;
        color: white;
    }
</style>